<template>
  <div class="gray w">
    <div class="container">
      <div class="miaosha">
        <!-- 秒杀标题区域 -->
        <div class="header">
          <div class="title">今日秒杀</div>
          <div class="time">{{ this.time}}</div>
        </div>
        <!-- 秒杀说明区域 -->
        <div class="info">低折扣 疯抢24小时！</div>
        <!-- 秒杀商品列表区域 -->
        <ul class="goods">
          <li class="good" v-for="(item, index) in list" :key="index">
            <img :src="item.goods_imgs[0]" class="good_img" />
            <div class="good_price">
              ¥
              <span class="good_bargin">{{ item.goods_price }}</span>
              <span class="good_purchase">{{ item.goods_oldprice | priceFilter }}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import countDown from '@/assets/js/time.js'
export default {
  name: 'HomeMiaosha',
  data () {
    return {
      list: [],
      time: '',
      timer: null
    }
  },
  methods: {
    async getMiaoshaList () {
      // const { data: res } = await this.$http.get('/api/goods/bargain')
      const { data: res } = await this.$http.get('/api/goods/bargain')
      if (res.meta.status !== 200) return
      res.data.forEach(value => {
        value.goods_imgs = value.goods_imgs.split(' ')
      })
      this.list = res.data.slice(0, 2)
    },
    getCountDown () {
      const this_ = this
      this.time = countDown()
      this.timer = setInterval(() => {
        this_.time = countDown()
      }, 1000)
    }
  },
  filters: {
    priceFilter (value) {
      if (value !== 0) return '¥' + value
      return ''
    }
  },
  mounted () {
    this.getMiaoshaList()
    this.getCountDown()
  },
  destroyed () {
    clearInterval(this.timer)
    this.timer = null
  }
}
</script>

<style lang="less" scoped>
.container {
  height: 10rem;
  padding: .2rem;
  background-color: #fff;
  border-radius: .2rem;
  .miaosha {
    padding: .3rem;
    background-image: linear-gradient(
      rgba(255, 192, 203, 0.3),
      rgba(255, 255, 255, 1)
    );
    border-radius: .2rem;
    // 秒杀标题区域
    .header {
      padding: .3rem 0;
      .title {
        display: inline-block;
        font-size: .64rem;
        font-weight: 700;
        margin-right: .4rem;
      }
      .time {
        position: relative;
        display: inline-block;
        width: 3.6rem;
        height: .64rem;
        font-size: .64rem;
        color: #fff;
        background-color: red;
        border-radius: .3rem;
        text-align: right;
        vertical-align: baseline;
        padding: 0 .2rem;
      }
      .time::before {
        position: absolute;
        top: 0;
        left: .2rem;
        content: "\e614";
        font-family: "iconfont";
        margin-right: 0 0.1rem;
      }
    }
    // 秒杀说明区域
    .info {
      font-size: .56rem;
      color: red;
    }
    // 秒杀商品列表区域
    .goods {
      display: flex;
      margin-top: .4rem;
      .good {
        flex: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #fff;
        border-radius: .3rem;
        padding: .2rem 0;
        .good_img {
          width: 5rem;
          height: 5rem;
          margin-bottom: 0.2rem;
        }
        .good_price {
          font-size: .56rem;
          .good_bargin {
            font-size: .64rem;
            font-weight: 500;
          }
          .good_purchase {
            text-decoration: line-through;
            color: #ddd;
            padding-left: .2rem;
          }
        }
      }
      .good:nth-child(2) {
        margin-left: 3%;
      }
    }
  }
}
</style>
